
<template>
  <div>
    <div class="header">
      <div class="left">
        {{ title }}
      </div>
    </div>
    <avue-crud
      class="bodys"
      ref="crud"
      :page="page"
      :data="tableData"
      :table-loading="tableLoading"
      :option="detailTableOption"
      @on-load="getList"
    >
    </avue-crud>
  </div>
</template>

<script>
import { detailTableOption } from '@/const/crud/subway/swststockmonthcheck';
import { queryDetails } from '@/api/subway/swststockmonthcheck'

export default {
  name: "Details",
  data () {
    return {
      searchForm: {},
      tableData: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20, // 每页显示多少条
      },
      tableLoading: false,
      detailTableOption: detailTableOption
    };
  },
  props: {
    mainId: Number,
    signId: Number,
    title: String
  },
  watch: {
    'tableData': {
      handler(newValue, oldValue) {
        let checkNumber = 0
        let differenceNumber = 0
        newValue.forEach(value => {
          value.differenceNumber = value.settleNumber - (value.checkNumber || 0)
          checkNumber += value.checkNumber||0
          differenceNumber += value.differenceNumber||0
        })
        // let datas = {
        //   checkNumber: checkNumber,
        //   differenceNumber: differenceNumber
        // }
        // this.$emit("spot", datas)
      },
      deep: true
    }
  },
  methods: {
    getList (page) {
      let param = {
        refId: this.mainId
      };
      queryDetails(Object.assign({
            current: page.currentPage,
            size: page.pageSize
        }, param)).then((response) => {
          this.tableData = response.data.data.records;
          this.page.total = response.data.data.total;
          this.tableLoading = false;
          if(this.signId==1){
            this.tableData.forEach(d => {
              d.$cellEdit = true
            })
          }
        })
        .catch(() => {
          this.tableLoading = false;
        });
    }
  }
};
</script>
<style scoped>
.header {
  margin: 0 auto;
  width: 99%;
  height: 40px;
  padding: 5px 10px;
  border: 1px solid #e4e4e4;
  border-bottom: none;
  background-color: #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bodys{
  margin-top: -45px;
}
</style>
